<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Danmaku</title>
    <link rel="icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="danmaku.css">
    <script type="text/javascript" src="danmaku.js"></script>
</head>
<body>
<header>
    <div id="header">
        <img id="logo" src="img/sakura.png">
        <div class="dropdown">
            <span>主站<img src="img/dropdown.png" style="height: 10px"></span>
            <div class="dropdown-content">
                <img class="catalogLogo" src="img/catalog.png"><small class="catalogText">动画</small><br/>
                <hr/>
                <img class="catalogLogo" src="img/catalog.png"><small class="catalogText">番剧</small><br/>
                <hr/>
                <img class="catalogLogo" src="img/catalog.png"><small class="catalogText">国创</small><br/>
                <hr/>
                <img class="catalogLogo" src="img/catalog.png"><small class="catalogText">音乐</small><br/>
                <hr/>
                <img class="catalogLogo" src="img/catalog.png"><small class="catalogText">舞蹈</small><br/>
                <hr/>
                <img class="catalogLogo" src="img/catalog.png"><small class="catalogText">游戏</small><br/>
                <hr/>
                <img class="catalogLogo" src="img/catalog.png"><small class="catalogText">科技</small><br/>
                <hr/>
                <img class="catalogLogo" src="img/catalog.png"><small class="catalogText">数码</small>
            </div>
        </div>
        <span class="headerItem">会员购</span>
        <span class="headerItem">直播</span>
        <span class="headerItem">游戏中心</span>
        <span class="headerItem">漫画</span>
        <span class="headerItem">赛事</span>
        <input id="searchInput" placeholder="你们为什么这么多妈">
        <img id="searchButton" src="img/search.png">
        <span id="loginButton" class="headerItem">登录</span>
        <span id="registerButton" class="headerItem">注册</span>
    </div>
</header>
<div id="content">
    <div id="left">
        <div id="videoInfo">
            <strong id="videoTitle">【崩坏3rd CG混剪】琪亚娜：治此之世，何人不思</strong><br/>
            <small id="videoCatalog">动画 > 综合</small>
            <small id="videoTime">2020-01-17 11:17:18</small><br/>
            <small id="videoPopular">6.6万播放 · 3445弹幕</small>
        </div>
        <div id="player">
            <video
                    id="videoPlayer"
                    src="media/BV1Ut411v74a.mp4"></video>
            <canvas id="bulletLayer"></canvas>
            <div id="controls">
                <div id="progressBar"></div>
                <div id="progress"></div>
                <div id="buttons">
                    <img id="playButton" src="img/play.png">
                    <strong id="playTime">00:00/00:00</strong>
                    <div id="volume">
                        <img id="volumeButton" src="img/volume.png">
                        <div id="volumeBar"></div>
                        <div id="volumeAdjust"></div>
                    </div>
                    <div id="bulletOpc">
                        <img id="bulletOpcButton" src="img/bullet.png">
                        <div id="bulletOpcBar"></div>
                        <div id="bulletOpcAdjust"></div>
                    </div>
                    <img id="fullscreenButton" src="img/fullscreen.png">
                </div>
            </div>
        </div>
        <div id="comment">
            <div id="interaction">
                <div id="realtimeInteracts">
                    <small id="realtimePopular">
                        <small id="watching">124</small> 人正在看，<small id="bulleting">13</small> 条实时弹幕
                    </small>
                    <input id="bulletInput" placeholder="发个弹幕见证当下">
                    <div id="shootButton"><small>发送</small></div>
                </div>
                <div id="operations">
                    <img id="likeButton" class="operation" src="img/like.png">
                    <small id="likeNum" class="operationNum">11</small>
                    <img id="supportButton" class="operation" src="img/support.png">
                    <small id="supportNum" class="operationNum">10</small>
                    <img id="collectionButton" class="operation" src="img/collection.png">
                    <small id="collectionNum" class="operationNum">3</small>
                    <img id="shareButton" class="operation" src="img/share.png">
                    <small id="shareNum" class="operationNum">2</small>
                </div>
                <hr style="size: 1px; border: 0; border-top: lightgray solid 1px"/>
            </div>
            <div id="videoIntro">
                听日推时突然想到的搭配，花了几个小时剪辑 demo<br/>
                （与此同时把崩坏三所有的 CG 又看了一遍w）<br/>
                视频来源：<br/>
                <a>av17171032</a> CG合集<br/>
                <a>space.bilibili.com/27534330/</a> 爱酱<br/>
                音频：<br/>
                Everybody Wants To Rule The World<br/>
                电影《饥饿游戏2：星火燎原》插曲
                <div id="tags">
                    <div class="tagItem">手机游戏</div>
                    <div class="tagItem">剪辑</div>
                    <div class="tagItem">Demo</div>
                </div>
                <hr style="size: 1px; border: 0; border-top: lightgray solid 1px; margin-top: 10px"/>
            </div>
            <div id="sendComment">
                <span id="commentCount">3</span><small> 评论</small>
                <div id="commentEditor">
                    <img id="commentAvatar" src="media/avatar.jpg">
                    <input id="commentInput" placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。">
                    <div id="commentSendButton">发表<br/>评论</div>
                </div>
                <hr style="size: 1px; border: 0; border-top: lightgray solid 1px;
                    margin-top: 30px; margin-left: 60px;"/>
            </div>
            <div id="comments">
                <div class="commentItem">
                    <img class="commentItemAvatar" src="media/avatar.jpg">
                    <div class="commentItemDetails">
                        <p class="commentItemName">H825172uang</p>
                        <p class="commentItemContent">太惨辣就只有我自己</p>
                        <p class="commentItemOrigin">来自安卓客户端</p>
                        <p class="commentItemTime">2020-02-04 22:17</p>
                    </div>
                </div>
                <hr style="size: 1px; border: 0; border-top: lightgray solid 1px; margin-left: 60px;"/>
                <div class="commentItem">
                    <img class="commentItemAvatar" src="media/avatar.jpg">
                    <div class="commentItemDetails">
                        <p class="commentItemName">H825172uang</p>
                        <p class="commentItemContent">TODO: Tooltips　悬浮按键　结尾推荐　高能进度条　banner</p>
                        <p class="commentItemOrigin">来自安卓客户端</p>
                        <p class="commentItemTime">2020-02-04 22:18</p>
                    </div>
                </div>
                <hr style="size: 1px; border: 0; border-top: lightgray solid 1px; margin-left: 60px;"/>
                <div class="commentItem">
                    <img class="commentItemAvatar" src="media/avatar.jpg">
                    <div class="commentItemDetails">
                        <p class="commentItemName">H825172uang</p>
                        <p class="commentItemContent">别骂辣别骂辣，等重构吧</p>
                        <p class="commentItemOrigin">来自安卓客户端</p>
                        <p class="commentItemTime">2020-02-04 22:19</p>
                    </div>
                </div>
                <hr style="size: 1px; border: 0; border-top: lightgray solid 1px; margin-left: 60px;"/>
            </div>
        </div>
    </div>
    <div id="right">
        <div id="authorInfo">
            <img id="authorAvatar" src="media/avatar.jpg">
            <div id="authorIntro">
                <p id="authorID">H825172uang</p><br/>
                <small id="authorComment">来云村找我玩好不啦</small><br/>
                <div id="powerButton"><small>充电</small></div>
                <div id="followButton"><small>＋ 关注 62</small></div>
            </div>
        </div>
        <div id="advertisement">
            <img id="advImage" src="media/advertisement.jpeg">
        </div>
        <div id="recommend">
            <small style="color: gray">相关推荐:</small>
            <div class="recommendItem">
                <img class="recommendCover" src="media/recommends/recommend_1.jpg">
                <div class="recommendIntro">
                    <small class="recommendName">女武神们的情人节礼物！</small><br/>
                    <small class="recommendAuthor">崩坏3第一偶像爱酱</small><br/>
                    <small class="recommendPopular">536.1万播放·6.4万弹幕</small>
                </div>
            </div>
            <div class="recommendItem">
                <img class="recommendCover" src="media/recommends/recommend_2.jpg">
                <div class="recommendIntro">
                    <small class="recommendName">四谎 × Love the way you lie</small><br/>
                    <small class="recommendAuthor">Mso1a</small><br/>
                    <small class="recommendPopular">46.5万播放·5503弹幕</small>
                </div>
            </div>
            <div class="recommendItem">
                <img class="recommendCover" src="media/recommends/recommend_3.jpg">
                <div class="recommendIntro">
                    <small class="recommendName">建议改成《猫　片》</small><br/>
                    <small class="recommendAuthor">人活着就是为了马</small><br/>
                    <small class="recommendPopular">6.4万播放·440弹幕</small>
                </div>
            </div>
            <div class="recommendItem">
                <img class="recommendCover" src="media/recommends/recommend_4.jpg">
                <div class="recommendIntro">
                    <small class="recommendName">细数动漫经典曲目</small><br/>
                    <small class="recommendAuthor">Wlyoko_Core</small><br/>
                    <small class="recommendPopular">31.3万播放·1.3万弹幕</small>
                </div>
            </div>
            <div class="recommendItem">
                <img class="recommendCover" src="media/recommends/recommend_1.jpg">
                <div class="recommendIntro">
                    <small class="recommendName">(盗视频)女武神们的情人节礼物！</small><br/>
                    <small class="recommendAuthor">假的爱酱</small><br/>
                    <small class="recommendPopular">53.1万播放·1.6万弹幕</small>
                </div>
            </div>
            <div class="recommendItem">
                <img class="recommendCover" src="media/recommends/recommend_2.jpg">
                <div class="recommendIntro">
                    <small class="recommendName">(盗视频)四谎 × Love the way you lie</small><br/>
                    <small class="recommendAuthor">假的Mso1a</small><br/>
                    <small class="recommendPopular">6.6万播放·553弹幕</small>
                </div>
            </div>
            <div class="recommendItem">
                <img class="recommendCover" src="media/recommends/recommend_3.jpg">
                <div class="recommendIntro">
                    <small class="recommendName">(盗视频)建议改成《猫　片》</small><br/>
                    <small class="recommendAuthor">假的人活着就是为了马</small><br/>
                    <small class="recommendPopular">1.2万播放·40弹幕</small>
                </div>
            </div>
            <div class="recommendItem">
                <img class="recommendCover" src="media/recommends/recommend_4.jpg">
                <div class="recommendIntro">
                    <small class="recommendName">(盗视频)细数动漫经典曲目</small><br/>
                    <small class="recommendAuthor">假的Wlyoko_Core</small><br/>
                    <small class="recommendPopular">6.6万播放·1万弹幕</small>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>